<template>
  <CommonLayout
    :current-module="moduleConfig.name"
    :menu-items="moduleConfig.menuItems"
    :page-title="pageTitle"
    @page-change="handlePageChange"
    @back-to-home="$emit('back-to-home')"
  >
    <template #page-actions>
      <button class="btn btn-secondary" @click="$emit('back-to-home')">
        <span>🏠</span> 返回首页
      </button>
    </template>

    <template #main-content>
      <div class="module-content">
        <h3>通讯录管理模块</h3>
        <p>当前页面：{{ currentPage }}</p>
      </div>
    </template>
  </CommonLayout>
</template>

<script setup>
import { ref } from "vue";
import CommonLayout from "../CommonLayout.vue";

const props = defineProps(["moduleConfig"]);
defineEmits(["back-to-home"]);

const currentPage = ref("directory");
const pageTitle = ref("组织架构");

const handlePageChange = (page) => {
  currentPage.value = page.key;
  pageTitle.value = page.title;
};
</script>

<style scoped>
.module-content {
  padding: 20px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-secondary {
  background: #95a5a6;
  color: white;
}
</style>
